<template>
  <div class="app-container">
    <el-row>
      <el-button type="success" @click="show">添加</el-button>
    </el-row>
    <el-table
      :data="Jkm"
      style="width: 100%"
    >
      <el-table-column
        prop="mc"
        label="名称"
      />
      <el-table-column label="数量" width="500" >
        <template slot-scope="scope">
        <el-input-number v-model="scope.row.glrysl" @change="sl_handleChange(scope.row)" :min="0"  label="描述文字"></el-input-number>
         <el-button type="primary" @click="queren(scope.row)" style="margin-left: 10px;">确认</el-button>
         <el-button  @click="wugengxin">无更新</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="UpdateTime"
        label="更新时间"
        :formatter="dateFormatter"
        >
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="隔离点人数"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form" style="margin-top: 20px;" :model="gld_from" label-width="180px">
        <el-form-item label="名称">
          <el-input v-model="gld_from.mc" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="gld_from.glrysl" @change="handleChange" :min="0"  label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <div style="text-align: center;width: 100%">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="cal">暂无更新</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { delJkm,queryJkm,addJkm,updatejkm,addgld,delgld,updategld,getgld } from "@/api/user"
import moment from '@/utils/moment'
export default {
  name: 'XgbdymjzsjForm',
  data() {
    return {
      form:{
        PageIndex: 1,
        PageSize: 10,
        total: 0,
      },
      dialogVisible: false,
      Jkm: [],
      gld_from: {
        mc: '',
        glrysl: ''
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    wugengxin(){
      this.$message('无更新')
      this.loadData()
    },
    queren(val){
      updategld({"Id":val.Id,"glrysl":val.glrysl+""}).then(res =>{
        if(res.IsSuccess){
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.loadData()
        }else{
          this.$message('更新失败！')
        }
      })
    },
    cal(){
      this.dialogVisible = false
      this.loadData()
    },
    sl_handleChange(val){
    },
    handleChange(val){
      this.sl =val
    },
    show(){
      this.gld_from = {glrysl: '0'}
      this.dialogVisible = true
    },
    loadData(){
      getgld(this.form).then(res =>{
        if(res.IsSuccess){
          this.Jkm = res.Data
          //this.form.total = res.Total
        }else{
          this.$message('删除失败！')
        }
      })
    },
    onSubmit() {
      if(this.gld_from.Id){
        updategld({"Id":this.gld_from.Id,"mc":this.gld_from.mc,"glrysl":this.gld_from.glrysl+""}).then(res =>{
        //updategld(this.gld_from).then(res =>{
          if(res.IsSuccess){
            this.$message({message: '更新成功',type: 'success'});
            this.dialogVisible = false
            this.loadData()
          }else{
            this.$message('更新失败！')
          }
        })
      }else{
        addgld({"mc":this.gld_from.mc,"glrysl":this.gld_from.glrysl+""}).then(res =>{
          if(res.IsSuccess){
            this.$message({message: '新增成功',type: 'success'});
            this.dialogVisible = false
            this.loadData()
          }else{
            this.$message('新增失败！')
          }
        })
      }
    },
    handleDelete(val){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          delgld({"Id":val.Id}).then(res =>{
            if(res.IsSuccess){
              this.$message({message: '删除成功',type: 'success'});
              this.loadData()
            }else{
              this.$message('删除失败！')
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    handleEdit(val){
      this.gld_from = val
      this.dialogVisible = true
      // updatejkm({'Id':val.Id}).then(res =>{
      //   if(res.IsSuccess){
      //     this.$message('更新成功')
      //     this.dialogVisible = false
      //     this.loadData()
      //   }else{
      //     this.$message('更新失败！')
      //   }
      // })
    },
    dateFormatter(row) {
     return moment(new Date(row.UpdateTime)).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

<style scoped>

</style>
